<template>
<!-- 达人详情 - 关联直播 5 123 -->
  <div id="liveRecord"
       v-infinite-scroll="loadMore"
       infinite-scroll-disabled="busy"
       infinite-scroll-distance="0"
       infinite-scroll-immediate-check="false">
    <div v-if="vipRootObj[5][123].owner">
      <div class="videoBox1">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="../../../../../assets/wang/tdetails/dataimg.png"
                 alt="" />
            <span>数据概况</span>
          </div>
          <radio_group01 v-model="recordDataTime"
                         class="mr_16"
                         :radio_values="['昨天', '近7天', '30天']" />
        </div>
        <div class="theDataBox">
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.live_incr) }}</p>
            <p>新增直播场次</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.sound_incr) }}</p>
            <p>音浪增量</p>
          </div>
          <!-- <div class="theDataItem">
            <p>{{ format_num(dataCountObj.vip_fans) }}</p>
            <p>直播粉丝团数增量</p>
          </div> -->
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.pro_count) }}</p>
            <p>直播商品数</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.volume) }}</p>
            <p>直播销量（预估）</p>
          </div>
          <div class="theDataItem">
            <p>{{ format_num(dataCountObj.sale) }}</p>
            <p>直播销售额（预估）</p>
          </div>
        </div>
      </div>
      <div class="videoBox2">
        <div class="chartTitle">
          <div class="titleBox">
            <img src="@/assets/meng/hot_analyse05.png"
                 alt="" />
            <span>直播列表</span>
          </div>
        </div>
        <div class="optionsBox">
          <!-- 搜索 -->
          <section class="search01">
            <div class="searchBox">
              <el-input v-model="keyWords"
                        placeholder="请输入关键词在直播列表中搜索"
                        @keyup.enter.native="toSearch"></el-input>
              <div class="imgBox"
                   @click="toSearch">
                <img src="@/assets/wang/talentCompare/search.png" />
              </div>
            </div>
          </section>
          <multi_select v-model="isshop"
                        :options="['仅显示带货直播']" />
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>直播间</th>
              <th>开播时间<br />结束时间</th>
              <th>观看人数峰值</th>
              <!-- <th>本场音浪</th> -->
              <th>商品数</th>
              <th>直播销量（预估）</th>
              <th>直播销售额（预估）</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in liveRecordList"
                :key="'l' + index">
              <td>
                <div class="roomInfo">
                  <div class="imgBox">
                    <img :src="item.room_logo" />
                    <!-- <div class="liveBox">
                      <p class="livingGif">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                      </p>
                      <span class="liveText">直播中</span>
                    </div> -->
                  </div>
                  <div class="roomRight">
                    <div class="nameBox">
                      <span>{{ item.room_title }}</span>
                    </div>
                    <p>
                      直播时长：{{
                        format_time(
                          (item.end_timestamp - item.begin_timestamp) * 1000
                        )
                      }}
                    </p>
                    <div class="kindBox">
                      <div v-for="(item1, index1) in item.tag"
                           :key="'hw' + index1"
                           class="kind">
                        {{ item1 }}
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <span>{{
                  timestamp(item.begin_timestamp, "Y-M-D h:m:s")
                }}</span>
                <br /><span v-if="item.status!=1">{{
                  timestamp(item.end_timestamp, "Y-M-D h:m:s")
                }}</span><span v-if="item.status==1">--</span>
              </td>
              <td>{{ format_num(item.vister_speak) }}</td>
              <!-- <td>{{ format_num(item.sound_count) }}</td> -->
              <td>{{ format_num(item.pro_count) }}</td>
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.sale) }}</td>
              <td>
                <div class="detailsBtnwl"
                     @click="toLiveDetails(item.room_id, '0')">
                  查看详情
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-loading="loading"
             v-if="!(liveRecordList.length < (page - 1) * 20)"
             class="loading"
             element-loading-text="拼命加载中..."
             element-loading-spinner="el-icon-loading"></div>
        <p class="nothing"
           v-show="
            liveRecordList.length != 0 &&
            liveRecordList.length < (page - 1) * 20
          ">
          我是有底线的～
        </p>
        <div class="empty"
             v-show="!loading && isNoData">
            <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
        </div>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else
         class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/liveRecord.jpg'"
           class="egBgImg" />
      <el-dialog :visible="true"
                 :modal-append-to-body="false"
                 :lock-scroll="false"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
                 :append-to-body="false"
                 :show-close="false"
                 custom-class="detailsDialog">
        <div class="dialogEg">
          <payVip routerName="liveRecord" :lowestVipNum="vipRootObj[5][123].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      recordDataTime: '近7天',
      isshop: '',
      keyWords: '',
      dataCountObj: '',
      liveRecordList: [],
      page: 1,
      isNoData: false,
      busy: false,
      loading: true,
      dialog: false,
      video_id: '',
      active_name01: 1,
      // 取消之前未响应的请求
      cancel1: null,
      cancel2: null,
      hotword: ['日用百货', '母婴用品'],
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    }
  },
  computed: {},
  watch: {
    recordDataTime: function (newVal, oldVal) {
      this.getDataCount()
      this.page = 1
      this.liveRecordList = []
      this.getList()
    },
    // 是否屏蔽已删除视频
    isshop: function (newVal, oldVal) {
      this.page = 1
      this.liveRecordList = []
      this.getList()
    },
    // 搜索
    keyWords: function (newVal, oldVal) {
      if (newVal == '') {
        this.page = 1
        this.liveRecordList = []
        this.getList()
      }
    },
  },
  created() {
    if (this.vipRootObj[5][123].owner) {
      this.getList()
      this.getDataCount()
    }
  },
  mounted() {},

  methods: {
    toSearch() {
      if (this.keyWords != '') {
        this.page = 1
        this.liveRecordList = []
        this.getList()
      }
    },
    changeTime() {
      this.getList()
    },
    // 列表
    getList() {
      let that = this
      let time = '1d'
      if (that.recordDataTime == '昨天') {
        time = '1d'
      } else if (that.recordDataTime == '近7天') {
        time = '7d'
      } else if (that.recordDataTime == '30天') {
        time = '30d'
      } else if (that.recordDataTime == '90天') {
        time = '90d'
      }
      that.loading = true
      let isshop = 0
      if (that.isshop.indexOf('仅显示带货直播') != -1) {
        isshop = 1
      } else {
        isshop = 0
      }
      that.$axios
        .get(
          '/api/live/GetAuthorLiveRecord',
          {
            params: {
              authorid: that.$route.params.id,
              isshop: isshop, //1带货
              keyword: this.trimStr(that.keyWords),
              page: that.page,
              size: 20,
              day: time,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel2 != null) {
                that.cancel2()
              }
              that.cancel2 = c
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.page += 1
            that.liveRecordList = that.liveRecordList.concat(res.data.data)
            res.data.data.length < 20 ? (that.busy = true) : (that.busy = false)

            if (that.liveRecordList.length != 0) {
              that.isNoData = false
            } else {
              that.isNoData = true
            }
          } else {
            that.isNoData = true
            that.busy = true
          }
          that.loading = false
        })
        .catch((err) => {})
    },
    loadMore() {
      // console.log(11);
      if (this.loading == false) {
        this.getList()
      }
    },
    // 数据
    getDataCount() {
      let that = this
      let time = '1d'
      if (that.recordDataTime == '昨天') {
        time = '1d'
      } else if (that.recordDataTime == '近7天') {
        time = '7d'
      } else if (that.recordDataTime == '30天') {
        time = '30d'
      } else if (that.recordDataTime == '90天') {
        time = '90d'
      }
      that.$axios
        .get(
          '/api/live/GetAuthorLiveInfo',
          {
            params: {
              authorid: that.$route.params.id,
              day: time,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel1 != null) {
                that.cancel1()
              }
              that.cancel1 = c
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.dataCountObj = res.data.data
          }
        })
        .catch((err) => {})
    },
    seeDetais(id, index) {
      this.dialog = true
      this.active_name01 = index
      this.video_id = id
    },
    // 直播间详情
    // 跳直播详情
    toLiveDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/${tabNo}`,
      })
      window.open(router.href, '_blank')
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      })
      window.open(router.href, '_blank')
    },
  },
}
</script>
<style lang='less' scoped>
#liveRecord {
  width: 100%;
  min-height: 100vh;
  .search01 {
    display: inline-block;
    margin-right: 33px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .chartTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 43px;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }
  // 数据概况
  .videoBox1 {
    .theDataBox {
      width: 100%;
      height: 140px;
      background-color: #ffffff;
      border: solid 1px #e5e5e5;
      border: dashed 1px #e5e5e5;
      box-sizing: border-box;
      padding: 47px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 39px;

      .theDataItem {
        flex: 1;
        text-align: center;
        border-right: dashed 1px #e5e5e5;

        p:nth-of-type(1) {
          color: #222222;
          font-size: 26px;
          font-family: DINAlternate-Bold;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          color: #888888;
          font-family: DINAlternate-Bold;
          padding-top: 3px;
        }
      }

      .theDataItem:last-child {
        border-right: none;
      }
    }
  }
  //   视频作品
  .videoBox2 {
    .optionsBox {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 31px;
      span {
        font-size: 14px;
        color: #222222;
        padding-right: 16px;
      }
      .el-date-editor {
        margin-right: 31px;
      }
    }
    table {
      width: 100%;
      margin-top: 20px;
      overflow: auto;
      tr {
        text-align: center;
      }
      thead {
        width: 100%;
        background-color: #f5f9ff;
        border-radius: 4px;
        tr {
          font-size: 14px;
          color: #555555;
          th:nth-child(1) {
            width: 27%;
            text-align: left;
            padding-left: 2%;
          }
          th {
            white-space: pre-wrap !important;
          }
        }
      }
      tbody {
        tr {
          height: 161px;
          border-bottom: 1px solid #e5e5e5;
          td:nth-child(1) {
            width: 27%;
            text-align: left;
          }
          td:nth-child(2),
          td:nth-child(3),
          td:nth-child(4),
          td:nth-child(5),
          td:nth-child(6) {
            font-family: DINAlternate-Bold;
            font-size: 16px;
            color: #222222;
          }
          // td:nth-child(6) {
          //   color: #1779ff !important;
          // }
        }
      }
    }
    // 直播间
    // 直播间
    .roomInfo {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-right: 10px;
      padding-left: 10px;
      .imgBox {
        width: 80px;
        height: 100px;
        border-radius: 4px;
        position: relative;
        img {
          width: 80px;
          height: 100px;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
        }
        .liveBox {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 81px;
          height: 22px;
          background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
            linear-gradient(#ffffff, #ffffff);
          background-blend-mode: normal, normal;
          border-radius: 0px 0px 4px 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          .liveText {
            font-weight: 600;
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
      .roomRight {
        margin-left: 22px;
        .nameBox {
          text-align: left;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            font-size: 16px;
            color: #222222;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          img {
            width: 16px;
            height: 16px;
            margin-left: 6px;
          }
        }
        p {
          font-size: 14px;
          color: #888888;
          padding-top: 6px;
          text-align: left;
        }
        .kindBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 12px;
          .kind {
            box-sizing: border-box;
            height: 26px;
            line-height: 26px;
            background-color: #f5f9ff;
            border-radius: 13px;
            border: solid 1px #1779ff;
            font-size: 14px;
            color: #1779ff;
            padding: 0 12px;
            margin-right: 10px;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>